<template>
    <div class="home">
          <div class="home-head">
              <div class="home-head-fl">
                  <label for="male">送至：</label><span id="male">昌平区</span><i class="icon iconfont icon-right"></i>
              </div>
              <div class="home-head-fr">
                  <i class="icon iconfont icon-sousuo" @click="showFn"></i>
              </div>
          </div>
          <div class="home-content">
              <ul class="list">
                  <li @click="toggle(index ,tab.view)" v-for="(tab,index) in tabs" :class="{active:active==index}" :key="index">
                  {{tab.type[0]}} <img :src="tab.type[1]">
                  </li>
              </ul>
              <component :is="currentView"></component>
          </div>
    </div>
</template>
<script>
import Vue from 'vue';
import Qqjx from "../qqjx";
import Ddcs from "../ddcs";
export default{
    data(){
        return {
          active: 0,
          currentView: Ddcs,
          tabs: [
          {
          type: ['多点超市','https://img.dmallcdn.com/bizItem/201612/c61ded35-a9f4-49a0-9fc3-193b6bafefec'],
          view: Ddcs
          },
          {
          type: ['全球精选','https://img.dmallcdn.com/bizItem/201707/b91f5f2f-130f-4420-b861-5e74d262c462'],
          view: Qqjx
          }
          ]
        }
    },
     methods: {
       toggle(i, v){
       this.active = i
       this.currentView = v
       },
       showFn(){
         //调用mutations中的方法
         this.$store.commit("porpupFn");
       }
     }
}
</script>
<style scoped>
.home-head{height:0.44rem;display:flex;align-items:center;justify-content:space-between;padding:0 0.2rem;}
.home-head .home-head-fr i{font-size:0.25rem}
.home-head .home-head-fl i{font-size:0.14rem}
.active{color:red}
.list{display: flex;align-items:center;height:0.4rem;}
.list li {margin:0 0.1rem;position:relative}
.list li img{width:0.42rem;position:absolute;top:-0.1rem;left:0.2rem}
</style>
